<template>
    <div class="flex align-center pl-4 pr-4 pt-2 pb-2 cursor-pointer">
        <div class="diy-checkbox mr-2" v-if="props.multiple">
            <v-checkbox label="" :value="props.item.raw[props.itemValue]" v-model="value" @click.stop=""></v-checkbox>
        </div>
        <div>
            <div class="flex align-center mb-1">
                <!-- 頭像 -->
                <v-avatar color="surface-variant" size="28" class="mr-2">
                    <v-img alt="" :src="props.item.raw[props.itemAvatar]"></v-img>
                </v-avatar>
                <!-- 内容 -->
                <div>
                    <div :class="{
                        'text-text--primary': (value && props.multiple && value.indexOf(props.item.raw[props.itemValue]) == -1) || (!props.multiple && value != props.item.raw[props.itemValue])
                    }" class="text-[14px] leading-[16px]">
                        <!-- 名稱 -->
                        <span class="font-[500] text-[13px] leading-[16px] mr-2">{{
                            props.item.raw[props.itemTitle] }}</span>
                        <!-- 描述 -->
                        <span class="font-[400] text-[12px] leading-[16px]">{{
                            props.item.raw[props.itemDesc] }}</span>
                    </div>
                    <!-- 職位 -->
                    <div class="font-[500] text-[12px] leading-[14px]" :class="{
                        'text-text--secondary': (value && props.multiple && value.indexOf(props.item.raw[props.itemValue]) == -1) || (!props.multiple && value != props.item.raw[props.itemValue])
                    }" v-if="props.item.raw[props.itemPosition]">{{ props.item.raw[props.itemPosition] }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const props = defineProps({
    item: {
        type: Object
    },
    multiple: {
        type: Boolean
    },
    itemTitle: {
        type: String,
        default: ''
    },
    itemDesc: {
        type: String,
        default: ''
    },
    itemValue: {
        type: String,
        default: ''
    },
    itemAvatar: {
        type: String,
        default: ''
    },
    itemPosition: {
        type: String,
        default: ''
    }
});
const value = defineModel();
</script>

<style scoped>
.diy-checkbox :deep(.v-input__details) {
    display: none;
}

.diy-checkbox :deep(.v-selection-control__input) {
    width: 24px;
    height: 24px;
}

.diy-checkbox :deep(.v-selection-control__wrapper) {
    width: 24px;
    height: 24px;
}

.diy-checkbox :deep(.v-selection-control) {
    min-height: auto;
}
</style>